<template>
    <div id="app">
        <a-modal v-model:visible="visable" title="角色授权" :width="400" :top="80" @ok="doSubmit" @cancel="close">
            <a-spin style="width:100%" :spinning="loading" tip="Loading...">

                <a-tabs v-model="group" @change="setGroup" :active-key="group">
                    <template #extra>
                        <a-checkbox v-model="checkStrictly" @change="() => {
                            formData.roles = [];
                            getAuthorize();
                        }">
                            <span>单选</span>
                        </a-checkbox>
                    </template>

                    <a-tab-pane title="管理后台" key="platform">
                        <a-tree :checkable="true" v-model:checked-keys="formData.roles" :check-strictly="checkStrictly"
                            :data="menuList" @check="setRoles" multiple :fieldNames="{
                                key: 'menuId',
                                title: 'title',
                                children: 'children',
                                icon: ''
                            }" />
                    </a-tab-pane>
                    <a-tab-pane title="客户端小程序" key="api">
                        <a-tree :checkable="true" v-model:checked-keys="formData.roles" :check-strictly="checkStrictly"
                            :data="menuList" @check="setRoles" :multiple="true" :fieldNames="{
                                key: 'menuId',
                                title: 'title',
                                children: 'children',
                                icon: ''
                            }" />
                    </a-tab-pane>
                    <a-tab-pane title="商户端APP" key="mch">
                        <a-tree :checkable="true" v-model:checked-keys="formData.roles" :check-strictly="checkStrictly"
                            :data="menuList" @check="setRoles" :multiple="true" :fieldNames="{
                                key: 'menuId',
                                title: 'title',
                                children: 'children',
                                icon: ''
                            }" />
                    </a-tab-pane>
                </a-tabs>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
export default {
    setup(props, { emit }) {
        const visable = ref(false);
        const loading = ref(false);
        const group = ref('platform');
        const checkStrictly = ref(true);
        const menuList = ref([] as any);
        const treeData = ref([]);//临时数组
        const formData = ref({
            roles: [],
            roleId: [],
        });

        const show = (data: any) => {
            visable.value = true;
            group.value = 'platform';
            console.log(group.value)
            if (!utils.isEmpty(data)) {
                formData.value.roleId = data.roleId;
                formData.value.roles = [];
                menuList.value = [];
                getMenuList();
            }
        };
        const close = () => {
            formData.value.roles = [];
            visable.value = false;
            emit("close");
        };
        const setGroup = (key: any) => {
            group.value = key;
            formData.value.roles = [];
            menuList.value = [];
            getMenuList();
        };
        const doSubmit = () => {
            return new Promise(resolve => {
                utils.loading();
                // console.log(formData.value.roles);
                request.post('/platform/role/auth', formData.value).then((ret: any) => {
                    if (ret.code == 200) {
                        resolve(true);
                        close();
                        emit('success');
                        utils.success('授权成功!');
                    }
                    resolve(false);
                }).catch(() => {
                    resolve(false);
                    loading.value = false;
                })
            })
        };
        const getMenuList = () => {
            loading.value = true;
            utils.loading();
            request.get("/platform/role/menu/" + formData.value.roleId, {
                group: group.value
            }).then((ret: any) => {
                group.value = group.value;
                menuList.value = ret.data as any;
                getAuthorize();
            })
        };
        const getAuthorize = () => {
            request.get("/platform/role/authorize", {
                platform: group.value,
                roleId: formData.value.roleId
            }).then(ret => {
                formData.value.roles = ret.data;
                if (treeData) {
                    treeData.value.forEach(item => {
                        formData.value.roles.push(item);
                    })
                }
                loading.value = false;
            })
        };

        const setRoles = (checkedKeys: any) => {
            console.log(checkedKeys)
            formData.value.roles = checkedKeys;
            treeData.value = checkedKeys;
        };
        return { visable, loading, group, menuList, setRoles, setGroup, formData, show, close, doSubmit, getAuthorize, checkStrictly, treeData, props };
    }
};
</script>

<style scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>
